<template>
    <div>
        <div v-show="radio==1">
            <div style="margin-left:20px"><span>用户列表</span></div>
            <div class="switcher">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="角色组" name="first">
                        <div class="roletree">
                            <RightRoleTree :RightRole="RightRole" :LeftSingleId="LeftSingleId" :RightTreeckeck="RightTreeckeck"></RightRoleTree>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="用户组" name="second">
                        <div>
                            <RightTable 
                                :RightUser="RightUser" 
                                :RightList="RightList"
                                :RightresetTable="RightresetTable"
                                :LeftSingleId="LeftSingleId">
                            </RightTable>
                        </div>
                        <div class="block">
                            <el-pagination
                            @current-change="handleCurrentChange"
                            :page-sizes="[1]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="NewTotalNum==0?RightTotalNum:NewTotalNum">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div v-show="radio==2">
            <div style="margin-left:20px"><span>用户列表</span></div>
            <div class="rightSingTree">
                <RightSingleTree :RigthMenu="RigthMenu"></RightSingleTree>
            </div>
        </div>
    </div>
</template>

<script>
import RightRoleTree from './components/RightRoleTree'
import RightTable from './components/RightTable'
import RightSingleTree from './components/RightSingleTree'
import {RightgetUser} from '@/api/jurisdiction'

export default {
    name:'jurisdictionRight',
    props:{
        radio:{
            type:String,
            required: true
        },
        RightRole:{
            type:Array,
            required: true
        },
        RightUser:{
            type:Array,
            required: true
        },
        RightTotalNum:{
            type:Number,
            required: true
        },
        RigthMenu:{
            type:Array,
            required: true
        },
        LeftSingleId:{
            type:Number,
            required: true
        },
        RightTreeckeck:{
            type:Array,
            required: true
        },
        NewTotalNum:{
            type:Number,
            required: true
        },
        RightresetTable:{
            type:Array,
            required: true
        }
    },
    data(){
        return{
            activeName: 'second',
            RightList:[],   //右侧的列表
        }
    },
    components:{
        RightRoleTree,
        RightTable,
        RightSingleTree
    },
    methods:{
        handleCurrentChange(val){
            RightgetUser({keyName:'',userStatu:0,page:val,pageSize:2}).then((res)=>{
                this.RightList=res.Result.Items
            }).catch((error)=>{
                console.log(error)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav-wrap:after{
    background-color: #ffffff;
}
.switcher{
  width:85%;
  height: 500px;
  margin: 30px 0 0 100px;
  overflow-x:auto;
  white-space:nowrap;
  .roletree{
    width:250px;
    height: 300px;
    overflow-x:auto;
    white-space:nowrap;
  }
  .roletree::-webkit-scrollbar{
  width:10px;
  height:10px;     
  background-color:#d0cdc7;
}
.roletree::-webkit-scrollbar-track{  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  border-radius: 10px; 
  background-color:#d0cdc7;    
 }
 .roletree::-webkit-scrollbar-thumb{  
  border-radius: 10px;  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
  background-color:#a09d9d;
 } 
}
.rightSingTree{
    width:250px;
    height: 300px;
    margin: 30px 0 0 100px;
    overflow-x:auto;
    white-space:nowrap;
}
.block{
    text-align: right;
    margin:28px 30px 50px 0; 
}
</style>
